<template>
    <div>
        <Table  border :columns="columnsTable" :data="dataList">
            <template slot-scope="{ row }" slot="btn">
                <div class="action-button">
                    <Button type="primary" size="small" style="margin-right: 5px" @click="updateForm(row)">发送预警</Button>
                </div>
            </template>
        </Table>
        <Page :total="pageInfo.total" :current="pageInfo.pageNo" @on-change="changePage"></Page>
        <template>
            <Modal
                    v-model="modal1"
                    title="发送预警"
                    @on-ok="ok"
                    @on-cancel="cancel">
                <Checkbox-group class="ivu-row">
                    <Checkbox value="twitter" class="ivu-col ivu-col-span-24">
                        <Icon type="social-twitter"></Icon>
                        <span style="margin-right: 10px">姓名：张** </span>
                        |
                        <span  style="margin-left: 10px">联系电话：138****6688</span>
                    </Checkbox>
                    <Checkbox value="facebook" class="ivu-col ivu-col-span-24">
                        <Icon type="social-facebook"></Icon>
                        <span style="margin-right: 10px">姓名：王** </span>
                        |
                        <span  style="margin-left: 10px">联系电话：130****7788</span>
                    </Checkbox>
                    <Checkbox value="github" class="ivu-col ivu-col-span-24">
                        <Icon type="social-github"></Icon>
                        <span style="margin-right: 10px">姓名：李** </span>
                        |
                        <span  style="margin-left: 10px">联系电话：138****6578</span>
                    </Checkbox>
                    <Checkbox value="snapchat" class="ivu-col ivu-col-span-24">
                        <Icon type="social-snapchat"></Icon>
                        <span style="margin-right: 10px">姓名：赫** </span>
                        |
                        <span  style="margin-left: 10px">联系电话：138****5212</span>
                    </Checkbox>
                </Checkbox-group>
            </Modal>
        </template>
    </div>
</template>

<script>
// import { findPageList } from '@/api/outbreak-management/overseas-to-shen/early-warnings.js'
// 预警
export default {
  data () {
    return {
      modal1: false,
      social: ['facebook', 'github'],
      columnsTable: [
        {
          title: '姓名',
          minWidth: 120,
          key: 'name',
          align: 'center'
        },
        {
          title: '证件号码',
          minWidth: 200,
          key: 'id_num',
          align: 'center'
        },
        {
          title: '国籍',
          minWidth: 120,
          key: 'gj',
          align: 'center'
        },
        {
          title: '同行时间',
          minWidth: 120,
          key: 'mj_time',
          align: 'center'
        },
        {
          title: '同行方式',
          minWidth: 120,
          key: 'mj_func',
          align: 'center'
        },
        {
          title: '预警时间',
          align: 'center',
          minWidth: 120,
          key: 'warning_time',
          render: (h, params) => {
            let date = this.$common.moment(params.row.warning_time).format('YYYY-MM-DD')
            return h('div', date)
          }
        },
        {
          title: '预警推送',
          minWidth: 120,
          slot: 'btn',
          align: 'center'
        }
      ],
      dataList: [{
        name: '王小明',
        id_num: '210111********1234',
        gj: '中国',
        mj_time: '2020-03-01',
        mj_func: '飞机',
        warning_time: '2020-03-02'
      }],
      pageInfo: {
        flag: 1,
        pageNo: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  methods: {
    toDetail (id) {
      this.$router.push({ name: 'personnel-add', query: { id: id, showDetail: true } })
    },
    ok () {
      this.$Message.info('成功发送预警！')
    },
    cancel () {
      // this.$Message.info('成功发送预警！')
    },
    changePage (index) {
      this.pageInfo.pageNo = index
      this.getTableData()
    },
    updateForm () {
      console.log('1111')
      this.modal1 = true
    },
    getTableData () {
      // findPageList(this.pageInfo).then(({ data }) => {
      //   let { errcode, data: res } = data
      //   if (errcode === 0) {
      //     this.dataList = res.results
      //     this.pageInfo.total = res.totalRecord
      //   } else {
      //     this.$Message.error('获取预警列表失败!')
      //   }
      // })
    }
  },
  created () {
    this.getTableData()
  }
}
</script>
<style scoped>
    .ivu-col.ivu-col-span-24.ivu-checkbox-wrapper{
        margin-bottom: 10px;
    }
</style>
